<template>
    <view class="z-upload-loading">
        <view class="z-upload-loading_icon">
        <view class="z-upload-loading_icon__left">
            <view class="z-upload-loading_icon_mask"></view>
        </view>
        <view class="z-upload-loading_icon__right">
            <view class="z-upload-loading_icon_mask"></view>
        </view>
        </view>
    </view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
  $iconWidth: 80rpx;
  $bgc: transparent;
  $maskBgc: rgba(0, 0, 0, .6);
  .z-upload-loading {
    width: 100%;
    height: 100%;
    background: radial-gradient($bgc, $bgc 42rpx, $maskBgc 42rpx);
    position: relative;
    &_icon {
      width: $iconWidth;
      height: $iconWidth;
      border-radius: $iconWidth;
      overflow: hidden;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  
      &__left,
      &__right {
        width: 50%;
        height: 100%;
        background-color: $bgc;
        position: absolute;
        top: 0;
        overflow: hidden;
        z-index: 1;
      }
  
      &_mask {
        width: 100%;
        height: 100%;
        background-color: $maskBgc;
        z-index: 2;
      }
  
      &__left {
        left: 0;
  
        .z-upload-loading_icon_mask {
          transform-origin: 100% 50%;
          animation: loading-left 5s linear infinite;
        }
      }
  
      &__right {
        right: 0;
  
        .z-upload-loading_icon_mask {
          transform-origin: 0 50%;
          animation: loading-right 5s linear infinite;
        }
      }
    }
  }
  
  @keyframes loading-left {
    50% {
      transform: rotate(0);
    }
  
    100% {
      transform: rotate(180deg);
    }
  }
  
  @keyframes loading-right {
    50% {
      transform: rotate(180deg);
    }
  
    100% {
      transform: rotate(180deg);
    }
  }
</style>